مدیر experimental_SuspenseList React: تسلط بر هماهنگی تعلیق

            
import React, { Suspense } from 'react';

// A component that suspends until data is fetched
function MyComponent() {
  const data = useResource(fetchData()); // Hypothetical useResource hook
  return 
Data: {data}
;
}

function App() {
  return (
    Loading...

در این مثال، MyComponent از یک قلاب فرضی useResource برای واکشی داده‌ها استفاده می‌کند. اگر داده‌ها هنوز در دسترس نباشند، کامپوننت به حالت تعلیق در می‌آید و React بازگشتی (

معرفی experimental_SuspenseList

experimental_SuspenseList کامپوننتی است که به شما امکان می‌دهد نمایش چندین مرز Suspense را هماهنگ کنید. این امر به ویژه زمانی مفید است که لیستی از آیتم‌ها داشته باشید که هر کدام به داده‌های ناهم‌زمان متکی هستند. بدون SuspenseList، آیتم‌ها ممکن است در یک ترتیب درهم و برهم ظاهر شوند زیرا داده‌هایشان در دسترس قرار می‌گیرد. SuspenseList به شما امکان می‌دهد ترتیب نمایش آیتم‌ها را کنترل کنید و عملکرد و تجربه کاربری را بهبود بخشید.

experimental_SuspenseList آزمایشی در نظر گرفته می‌شود، بنابراین باید آن را از کانال آزمایشی وارد کنید:

            
import { unstable_SuspenseList as SuspenseList } from 'react';

            

              
                Copy
              
            
          

ویژگی revealOrder

مهمترین ویژگی برای SuspenseList revealOrder است. این ویژگی ترتیب نمایش مرزهای Suspense داخل SuspenseList را تعیین می‌کند. یکی از مقادیر زیر را می‌پذیرد:

• forwards: مرزهای Suspense را به ترتیبی که در درخت کامپوننت ظاهر می‌شوند، نمایش می‌دهد.
• backwards: مرزهای Suspense را به ترتیب معکوس ظاهر شدن در درخت کامپوننت نمایش می‌دهد.
• together: تمام مرزهای Suspense را به طور همزمان پس از در دسترس قرار گرفتن تمام داده‌ها نمایش می‌دهد.

مثال با revealOrder="forwards"

بیایید فرض کنیم که شما لیستی از کارت‌های محصول دارید و هر کارت نیاز به واکشی جزئیات محصول دارد. استفاده از revealOrder="forwards" تضمین می‌کند که کارت‌ها از بالا به پایین با بارگذاری داده‌هایشان ظاهر می‌شوند.

            
import React, { Suspense, unstable_SuspenseList as SuspenseList } from 'react';

function ProductCard({ productId }) {
  const product = useResource(fetchProduct(productId)); // Hypothetical fetchProduct function
  return (
    

      
{product.name}
      
{product.description}
    
  );
}

function App() {
  const productIds = [1, 2, 3, 4, 5];
  return (
    
      {productIds.map((productId) => (
        Loading product...